<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
		<style>
		  .el-carousel__item h3 {
		    color: #475669;
		    font-size: 14px;
		    opacity: 0.75;
		    line-height: 150px;
		    margin: 0;
		  }
		
		  .el-carousel__item:nth-child(2n) {
		     background-color: #99a9bf;
		  }
		  
		  .el-carousel__item:nth-child(2n+1) {
		     background-color: #d3dce6;
		  }
		</style>
	</head>
	<body>
		<div id="ele">
			<template>
			  <div class="block" style="width: 400px;">
				<!--  2.在某个轮播图的图标处(中间偏下位置缩略图)鼠标经过时更换  -->  
			    <span class="demonstration">默认 Hover 指示器触发</span>
			    <el-carousel :interval="4000" height="150px">
			      <el-carousel-item v-for="item in 4" :key="item">
			        <h3 class="small">{{ item }}</h3>
			      </el-carousel-item>
			    </el-carousel>
			  </div>
			  <!--  2.在某个轮播图的图标处(中间偏下位置缩略图)单击鼠标更换  -->
			  <div class="block" style="width: 400px;">
			    <span class="demonstration">Click 指示器触发</span>
				<!--  比上边的录播图多了个属性 trigger=click 用于点击更换轮播图  -->
			    <el-carousel :interval="4000" trigger="click" height="150px">
			      <el-carousel-item v-for="item in 4" :key="item">
			        <h3 class="small">{{ item }}</h3>
			      </el-carousel-item>
			    </el-carousel>
			  </div>
			</template><br /><br />
			
			<h1>自己实现的轮播图</h1>
			<!--  2.在某个轮播图的图标处(中间偏下位置缩略图)单击鼠标更换  -->
			<div style="width:400px">
			  <span class="demonstration">自己制作的轮播图</span>
			  <el-carousel :interval="4000" trigger="click" height="150px">
			    <el-carousel-item v-for="item in arr" :key="item">
			      <img :src="item" width="400px" height="150px"/>
			    </el-carousel-item>
			  </el-carousel>
			</div><br /><br />
			
			<!--  这个卡片化轮播图就比上边多了个type=card  -->
			<h1>卡片化轮播图</h1>
			<div style="width:600px">
				<el-carousel :interval="4000" type="card" height="150px">
					<el-carousel-item v-for="item in arr" :key="item">
						<img :src="item" width="400px" height="150px"/>
					</el-carousel-item>
				</el-carousel>
			</div>
		</div>
	</body>
	<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
	<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
	<script>
		let v=new Vue({
			el:"#ele",
			data:function(){
				return{
					arr:["imgs/b1.jpg","imgs/b2.jpg","imgs/b3.jpg","imgs/b4.jpg"]
				}
			},
			methods:{
				
			}
		});
	</script>
</html>
